<template>
  <div>
    <h2>vue-router</h2>
    <hr />
    <!-- 
      实现路由跳转
        1.vue-router 提供的一个全局组件 => <router-link to=""></router-link>
        2.vue-router 提供的一个 API => $router.push('')
    -->
    <h3>router-link 跳转</h3>
    <router-link to="/home2">Go to Home2</router-link>
    <h3>$router.push 跳转</h3>
    <button @click="$router.push('home2')">Go to Home2</button>
    <hr />
    <h3>动态传参</h3>
    <router-link to="/home3/10086">Go to Home3/10086</router-link>
    <p>参数 id: {{ id }}</p>
    <h3>层级</h3>
    <router-link to="/home3/10086/homeChildren">
      Go to Home3/10086/homeChildren
    </router-link>
    <br />
    <router-link to="/homeChildren">Go to /homeChildren</router-link>
    <h3>重定向</h3>
    <button @click="goToIndex('/')">Go to /</button>
    <h3>未匹配到</h3>
    <button @click="goToIndex('/other')">Go to 404</button>
    <ul>
      <li v-for="(value, key) in routerInfo" :key="key">
        {{ key }}：{{ value }}
      </li>
    </ul>
    <div>
      <h2>router-view</h2>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  props: ["id"],
  computed: {
    routerInfo() {
      const { fullPath, path, name, params, query, meta } = this.$route;
      return { fullPath, path, name, params, query, meta };
    },
  },
  methods: {
    goToIndex(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style>
h2 {
  color: #ff5500;
  text-align: center;
}
h3 {
  color: background;
}
</style>
